<template>
  <el-dialog
    title="分配角色"
    :visible="roledialogVisible"
    @close="closeDialog"
    @open="dialogOpend"
  >
    <el-checkbox-group v-model="checkList" v-loading="loading">
      <!-- label对应的值会被收集到 checkList中 双向绑定的-->
      <el-checkbox
        v-for="item in rolesList"
        :key="item.id"
        :label="item.id"
      >{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="setRoles">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { reqGetRolesList } from '@/api/setting'
import { reqGetUserDetailById } from '@/api/user'
import { reqAssignRoles } from '@/api/employees'

export default {
  props: {
    roledialogVisible: {
      type: Boolean,
      default: false
    },
    userId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      rolesList: [], // 所有角色列表
      checkList: [], // 复选框组收集选中的复选框到这个数组中
      loading: false
    }
  },
  created() {
    this.getRolseList()
  },
  methods: {
    closeDialog() {
      this.$emit('update:roledialogVisible', false)
    },
    // 分配角色
    async setRoles() {
      // 1.分配角色的业务
      const { message } = await reqAssignRoles({
        id: this.userId, // 点击的用户的id
        roleIds: this.checkList // 勾选角色列表
      })
      // 2. 提示用户
      this.$message.success(message)
      // 3.关闭对话框
      this.closeDialog()
    },
    // 获取所有角色列表
    async getRolseList() {
      const { data: { rows }} = await reqGetRolesList({ page: 1, pagesize: 300 }) // 真正的处理方案应该是后端出一个获取所有角色的接口
      // 存储角色列表
      this.rolesList = rows
    },
    // 获取员工信息
    async getUserInfo() {
      const { data: { roleIds }} = await reqGetUserDetailById(this.userId)
      // 将员工信息中的roleIds 赋值给 复选框组双向绑定的 checkList
      this.checkList = roleIds
    },
    // 监听对话框的打开事件, 打开的时候再去获取角色列表
    /* async dialogOpend() {
      this.loading = true
      // 获取所有权限
      await this.getRolseList()
      // 获取员工的已有权限
      await this.getUserInfo()
      this.loading = false
    } */
    dialogOpend() {
      this.loading = true
      // 获取所有权限
      // await this.getRolseList() // 10s
      // // 获取员工的已有权限
      // await this.getUserInfo() // 15s
      // 如何以最快的方式获取高多并发的promise的结果???
      // 等到所有的promise结果返回才会执行.then操作
      // Promise.all([promise对象1, promise对象2...]).then(()=>{}) 等待机制
      Promise.all([this.getRolseList(), this.getUserInfo()]).then(() => {
        this.loading = false
      })
      // this.loading = false // 25s之后才会变成false
    }
  }

}
</script>

<style>

</style>
